<template>
  <div>
    <order-step
      v-if="order && order.state"
      :orderState="order.state"
    />

    <order-control
      v-if="order && order.state"
      :orderId="order.id"
      :amount="order.amount"
      @onSuccess="getOrderDetail();getOrderLogs()"
      :orderState="order.state"
    />

    <el-tabs>
      <el-tab-pane label="订单基本信息">
        <table class="striped-border-table">
          <tr>
            <th>订单编号</th>
            <td>{{ order.serialNumber }}</td>
          </tr>
          <tr>
            <th>商品</th>
            <td>{{ order.orderGoods && order.orderGoods.name }}</td>
          </tr>
          <tr>
            <th>商品类型</th>
            <td>
              {{
                order.orderGoods &&
                order.orderGoods.goodsType &&
                order.orderGoods.goodsType.desc
              }}
            </td>
          </tr>
          <tr>
            <th>数量</th>
            <td>{{ order.count }}</td>
          </tr>
          <tr>
            <th>支付方式</th>
            <td>
              {{ (order.payType && order.payType.desc) || "待支付" }}
            </td>
          </tr>
          <tr v-if="isSuperAdmin">
            <th>支付金额(元)</th>
            <td>{{ order.amount || "待支付" }}</td>
          </tr>
          <tr>
            <th>订单状态</th>
            <td>
              {{ order.state && order.state.desc }}
            </td>
          </tr>
          <tr>
            <th>下单时间</th>
            <td>
              {{ order.createTime }}
            </td>
          </tr>
          <tr v-if="order.payDetail">
            <th>支付时间</th>
            <td>{{ order.payDetail.payTime }}</td>
          </tr>
          <tr v-if="order.shareUrl">
            <th>订单二维码</th>
            <td>
              <vue-qr
                :text="order.shareUrl"
                :size="200"
              ></vue-qr>
              <div>{{order.customer}}</div>
            </td>
          </tr>
        </table>
      </el-tab-pane>
      <el-tab-pane
        :label="photoText"
        lazy
        :disabled="!photoShow"
      >
        <div v-if="order.orderGoods">
          <el-button
            v-if="this.order.state.name === this.$CONST.ORDER_STATUS.PAID.name"
            :disabled="!photoValid"
            type="primary"
            @click="confirmPhoto"
          >确认图片</el-button>

          <div
            :key="item.id"
            v-for="item in order.orderGoods.photoSpecs"
          >
            <el-divider content-position="left">
              <el-tag
                v-if="item.name"
                type="success"
              >{{ item.name }}</el-tag>
              <el-tag style="margin-left: 10px">{{
                `宽: ${item.width} mm  高: ${item.height} mm DPI: ${item.dpi}`
              }}</el-tag>
              <!-- <el-popover style="maring-left:10px" placement="top" width="160" v-model="visible">
              <p><el-input v-model="item.memo" placeholder="备注"></el-input></p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false"
                  >取消</el-button
                >
                <el-button type="primary" size="mini" @click="visible = false"
                  >确定</el-button
                >
              </div>
              <el-button slot="reference">删除</el-button>
            </el-popover> -->
            </el-divider>
            <div v-if="order.state.name === $CONST.ORDER_STATUS.PAID.name">
              <image-uploader
                class="image-uploader"
                :key="index"
                v-for="(p, index) in item.photos"
                :imagePath.sync="p.photo"
                :imageSpecs="{
                  width: item.width * 10,
                  height: item.height * 10,
                  dpi: item.dpi,
                }"
                accept="image/*"
                :action="qiniuConfig.uploadUrl"
                :domain="qiniuConfig.domain"
                :catelog="`${order.serialNumber}/${order.orderGoods.name}/${
                  item.name
                }/${index + 1}/`"
                :data="{ token: qiniuConfig.token }"
              >
                <div slot="placeholder">{{ ++index }}</div>
              </image-uploader>
            </div>
            <div v-else>
              <el-image
                :key="i.id"
                v-for="i in item.photos"
                class="photo"
                fit="cover"
                :preview-src-list="item.photos.map((i) => i.photo)"
                :src="i.photo"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="物流信息">
        <el-table
          ref="expressTable"
          :data="order.deliverInfos | filterDelivery"
          style="width: 100%"
          @expand-change="onExpandChange"
        >
          <el-table-column type="expand">
            <template slot-scope="scope">
              <span>若未查到物流信息，请检查物流单号及物流公司是否正确，或</span>
              <el-button
                type="text"
                @click="onExpandChange(scope.row)"
              >刷新物流</el-button>
              <el-timeline v-loading="expressLoading">
                <el-timeline-item
                  :type="index == 0 ? 'success' : 'info'"
                  v-for="(item, index) in scope.row.express"
                  :key="index"
                  :timestamp="item.time"
                >
                  {{ item.desc }}
                </el-timeline-item>
              </el-timeline>
            </template>
          </el-table-column>

          <el-table-column label="物流公司">
            <template slot-scope="scope">
              {{ deliveryCompany(scope.row.deliverCode) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="deliverNumber"
            label="物流单号"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="deliverContact"
            label="收货人"
          >
          </el-table-column>
          <el-table-column
            prop="deliverContactMobile"
            label="联系电话"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="deliverAddress"
            label="地址"
            width="180"
          >
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="订单状态日志">
        <el-timeline style="margin-top: 20px">
          <el-timeline-item
            v-for="(item, index) in logs"
            :key="index"
            :type="index === 0 ? 'success' : 'info'"
            :timestamp="item.createTime"
          >
            <el-card>
              <h4>{{ item.state.desc }}</h4>
              <p>{{ item.remark }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import orderApi from '@/api/order'
import expressApi from '@/api/express'
import { getDeliveryCompany } from '@/utils/utils'
import orderStateLogApi from '@/api/orderStateLog'
import qiniuAPI from '@/api/qiniu'
import ImageUploader from '@/components/image/ImageUploader'
import orderStep from '@/components/order/OrderStep'
import orderControl from '@/components/order/OrderControl'
import vueQr from 'vue-qr'
import { mapGetters } from 'vuex'
export default {
  props: ['id'],
  name: 'info',
  components: {
    ImageUploader,
    orderStep,
    vueQr,
    orderControl
  },
  data () {
    return {
      order: {},
      qiniuConfig: {},
      logs: [],
      expressLoading: false
    }
  },
  filters: {
    filterDelivery (deliveryInfos) {
      return (
        deliveryInfos &&
        deliveryInfos.filter((i) => i.deliverCode && i.deliverNumber)
      )
    }
  },
  computed: {
    ...mapGetters(['mainContainerHeight', 'isSuperAdmin']),
    photoValid () {
      return (
        this.order.state &&
        this.order.state.name === this.$CONST.ORDER_STATUS.PAID.name &&
        this.order.orderGoods &&
        this.order.orderGoods.photoSpecs.every((item) => {
          return (
            item.photos &&
            item.photos.length > 0 &&
            item.photos.some((p) => p.photo && p.photo.startsWith('http'))
          )
        })
      )
    },
    photoText () {
      if (
        this.order.state &&
        this.order.state.name === this.$CONST.ORDER_STATUS.PAID.name
      ) {
        return '上传图片'
      } else {
        return '图片信息'
      }
    },
    photoShow () {
      if (
        this.order.state &&
        this.order.state.name !== this.$CONST.ORDER_STATUS.CREATE.name &&
        this.order.state.name !== this.$CONST.ORDER_STATUS.READY_PAY.name
      ) {
        return true
      } else {
        return false
      }
    }
  },
  created () {
    qiniuAPI.getPhotoConfig().then((res) => {
      this.qiniuConfig = res.data
    })
    this.getOrderLogs()
    this.getOrderDetail()
  },
  methods: {
    onExpandChange (row, expandedRows) {
      this.expressLoading = true
      expressApi
        .query(row.deliverCode, row.deliverNumber)
        .then((res) => {
          row.express = res.data
        })
        .finally(() => {
          this.expressLoading = false
        })
    },
    deliveryCompany (code) {
      return getDeliveryCompany(code)
    },
    confirmPhoto () {
      this.$confirm('确定提交图片吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        orderApi
          .confirmPhoto(this.order.id, this.order.orderGoods.photoSpecs)
          .then((res) => {
            this.$message.success('提交成功')
            this.getOrderDetail()
          })
      })
    },
    /**
     * 查询订单详情
     */
    getOrderDetail () {
      orderApi.getById(this.id).then((res) => {
        if (res.data) {
          this.order = Object.assign({}, res.data)

          if (this.order.state.name === this.$CONST.ORDER_STATUS.PAID.name) {
            this.order.orderGoods.photoSpecs.forEach((specs) => {
              specs.photos = Array(specs.number)
                .fill()
                .map((item) => {
                  return {
                    width: specs.width,
                    height: specs.height,
                    dpi: specs.dpi,
                    photo: null
                  }
                })
            })
          }
        }
      })
    },
    /**
     * 查询订单相关流水信息
     */
    getOrderLogs () {
      orderStateLogApi.getAllByOrderId(this.id).then((res) => {
        this.logs = res.data
      })
    }
  }
}
</script>

<style lang="scss">
.striped-border-table {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  width: 100%;
  margin: 10px 0;
  font-size: 13px;
  border-collapse: collapse;
  th,
  td {
    border: 1px solid #d3dce6;
    line-height: 20px;
    padding: 5px;
    text-align: center;
  }
  th {
    width: 40%;
  }
  tr:hover {
    background-color: #f5f5f5;
  }
}

.image-uploader {
  margin: 5px 10px;
}

.photo {
  width: 180px;
  height: 180px;
}
</style>
